<template>
  <a-drawer
    class="small"
    width="80%"
    placement="right"
    v-bind="$attrs"
    @close="close"
  >
    <template #title>
      <slot name="title"></slot>
    </template>
    <slot></slot>
    <div class="fixedBottom" v-if="!props.noFooter">
      <slot name="footer">
        <a-row type="flex" justify="end">
          <slot name="btns"></slot>
          <div>
            <a-button
              v-if="showCancel"
              size="small"
              @click="close"
              :style="{ marginRight: '8px' }"
            >
              {{ cancelText || '取消' }}
            </a-button>
            <!-- 选中数据将覆盖当前行项目。 -->
            <a-button
              :loading="isloading"
              type="primary"
              size="small"
              @click="confirm"
              v-if="showConfirm"
            >
              {{ confirmText || '确定' }}
            </a-button>
          </div>
        </a-row>
      </slot>
    </div>
  </a-drawer>
</template>
<script setup>
const emits = defineEmits(['close', 'confirm'])
const props = defineProps({
  noFooter: {
    type: Boolean,
    default: false
  },
  showConfirm: {
    type: Boolean,
    default: true
  },
  showCancel: {
    type: Boolean,
    default: true
  },
  confirmText: {
    type: String,
    default: ''
  },
  cancelText: {
    type: String,
    default: ''
  },
  isloading: {
    type: Boolean,
    default: false
  }
})
const close = () => {
  emits('close', false)
}
const confirm = () => {
  emits('confirm', false)
}
</script>
<style lang="scss" scoped>
.fixedBottom {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e9e9e9;
  padding: 8px 16px;
  background: #fff;
  text-align: right;
  z-index: 10;
}
</style>
